<template>
	<div class="stbox">
		<div class="conline">
			<!-- <img src="/imgs/cam/state-tit-bg.png" alt="" srcset="" /> -->
			<p>{{txt}}</p>
			<div class="stt">
				100
			</div>
		</div>
		<div class="coffline">
			<!-- <img src="/imgs/cam/state-tit-bg.png" alt="" srcset="" /> -->
			<p>{{txt2}}</p>
			<div class="stt">
				3
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		onMounted, //页面初始化
		onUnmounted, //页面卸载
		nextTick,
		computed,
		reactive,
		watch, //监控
		ref, //
		toRefs
	} from "vue";

	//外层绑定@onFn="hOnFn"
	const emit = defineEmits(['onFn', 'onUnSave']);
	//触发
	const hOnFn = (t) => {
		emit('onFn', t);
	}

	const hFn = () => {

	}
	//属性导出
	//使用方法 ref="rdom" rdom.value.hFn()
	defineExpose({
		hFn
	});


	//属性定义
	//数据绑定v-bind:dat="dat"  	 
	const props = defineProps({
		on: {
			type: Boolean,
			default: true
		},
		txt: {
			type: String,
			default: "在线"
		},
		txt2: {
			type: String,
			default: "离线"
		}
	});



	onMounted(() => nextTick(() => {

	}));
	onUnmounted(() => {

	})
</script>

<style scoped lang="scss">
	.stbox {
		display: flex;
		height: 180px;
		flex-direction: row;
		justify-content: space-around;
		font-size: 24px;
		font-weight: bolder;
		margin-top: 22px;

		>div {
			width: 40%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			align-content: center;
			background-size: 100% auto;
			background-repeat: no-repeat;
			background-position: bottom, top;
			position: relative;
			overflow: hidden;
		}

		img {
			width: 100%;
			height: 30px;
			filter: drop-shadow(0px 104px 0px #25A4A8f0);
			top: -100px;
			position: absolute;
		}

		p {
			position: absolute;
			top: -14px;
			font-weight: 100;
			font-size: 20px;
		}

		.stt {
			margin: 8px 0;
		}

		.conline {
			background-image: url(/imgs/cam/online-bg.png);
		}

		.coffline {
			background-image: url(/imgs/cam/offline-bg.png);

			img {
				filter: drop-shadow(0px 104px 0px #5578B1f0);
			}
		}
	}
</style>

<style module>
	/**
	 * 类名会被打乱
	 *绑定方法   :class="[$style.fullscreen]"
	 *申明 .fullscreen 
   */
</style>